<!-- 用户管理 -->
<template>
  <div>
    <el-button class="adduser" @click="showDrawerClick" type="primary"
      >添加账户</el-button
    >
    <el-popconfirm title="确定要全部删除吗？" @confirm="Removeuse(tableData)">
      <template #reference>
        <el-button
          class="adduser"
          :loading="AkeyLoading"
          :disabled="AkeyDisable"
          type="danger"
          >一键删除</el-button
        >
      </template>
    </el-popconfirm>
  </div>
  <el-table
    :data="tableData"
    border
    v-loading="loading"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" align="center" width="55" />
    <el-table-column
      prop="userName"
      align="center"
      label="用户名称"
      width="180"
    />
    <el-table-column
      prop="userAccount"
      align="center"
      label="用户账户"
      width="180"
    />
    <!-- <el-table-column prop="userPassword" align="center" label="用户密码" /> -->
    <el-table-column align="center" label="用户角色">
      <template #default="scope">
        <div class="userRole">
          <div v-for="item in scope.row.userRole" :key="item.roleId">
            <el-tag
              class="ml-2"
              :type="item.roleName === '超级管理员' ? 'success' : ''"
              >{{ item.roleName }}</el-tag
            >
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="deviceName" align="center" label="设备名称">
      <template #default="scope">
        <div class="userRole">
          <div v-for="item in scope.row.device" :key="item.deviceId">
            {{ item.deviceName }}
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="lastUpdateTime"
      align="center"
      label="最后更新时间"
    />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <!-- 修改 -->
        <el-button
          type="primary"
          :icon="Edit"
          circle
          @click="handleEdit(scope.row)"
        ></el-button>
        <!-- 删除 -->
        <el-popconfirm title="确定要删除吗？" @confirm="Removeuse(scope.row)">
          <template #reference>
            <el-button
              type="danger"
              :loading="scope.row.loading"
              :icon="Delete"
              circle
            />
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <Drawer
    :showDrawer="showDrawer"
    @clickShow="clickShow"
    :userInfoData="userInfoData"
    :title="title"
  />
  <!-- <aaa /> -->
</template>

<script setup>
// 值 还没有处理完毕   等待处理 数据的传递
import { ref, reactive } from 'vue'
import { accountInfo, accountRemove } from '@/api/user'
import { Edit, Delete } from '@element-plus/icons-vue'
import Drawer from './components/Drawer'
import { ElMessage } from 'element-plus'

const loading = ref(false)
// 抽屉的隐藏显示
const showDrawer = ref(false)
const title = ref('')

const tableData = ref([])
// 查询用户信息
const getAccountInfo = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    accountInfo().then((res) => {
      console.log(res.data)
      tableData.value = res.data.map((item) => {
        item.loading = false
        return item
      })
    })
  }, 300)
}
getAccountInfo()
/**
 * 添加和修改相关
 */
const userInfoData = reactive({})

const showDrawerClick = () => {
  title.value = '添加'
  showDrawer.value = true
  Object.keys(userInfoData).forEach((keys) => {
    userInfoData[keys] = ''
  })
  // console.log(tableData.value)
}
// 修改

const handleEdit = (scope) => {
  title.value = '修改'
  Object.assign(userInfoData, scope)
  showDrawer.value = true
  Object.assign(userInfoData, scope)
  // console.log(scope)
}
// console.log(userInfoData)
// 监听抽屉关闭否
const clickShow = (val, data) => {
  showDrawer.value = val
  if (data === '00000') {
    getAccountInfo()
  }
}
/**
 * 删除相关
 */
// 一键删除的 loading
const AkeyDisable = ref(true)
// 选中项
const handleSelectionChange = (val) => {
  if (val.length > 0) {
    AkeyDisable.value = false
  } else {
    AkeyDisable.value = true
  }
}
// 删除
// 一键删除的 loading
// 封装删除接口
const remove = (data) => {
  // console.log(data)
  const userIdIds = data.map((item) => {
    return item.userId
  })
  accountRemove({ userId: userIdIds })
    .then((res) => {
      ElMessage({
        message: res.message,
        type: 'success'
      })
    })
    .catch((err) => {
      ElMessage({
        message: err.message,
        type: 'success'
      })
    })
}
const AkeyLoading = ref(false)
const Removeuse = (data) => {
  if (data instanceof Array) {
    AkeyLoading.value = true
    setTimeout(() => {
      AkeyLoading.value = false
      remove(data)
    }, 500)
  } else {
    data.loading = true
    setTimeout(() => {
      data.loading = false
      data = [data]
      remove(data)
    }, 500)
  }
  //  筛选数据 吧数据为 aisleId 的全部筛选出来并(返回)保存

  // console.log(data)
}
</script>

<style lang="scss" scoped>
.adduser {
  margin-bottom: 20px;
}
.userRole {
  display: flex;
  justify-content: space-around;
}
</style>
